// 依靠winodw上挂载的 createAlignmentView 实现
import React from "react";
// import pairwiseAlignment from "./json/pairwiseAlignment.json"
import msaAlignment from "./json/msaAlignment.json"

export default class StandaloneAlignmentDemo extends React.Component {
  mountEditor = () => {
    const alignment = window.createAlignmentView(this.node, {
      ...msaAlignment,
      id: "pairwiseRun1",
      handleAlignmentRename: () => {
        console.info("React-> alignment being renamed!");
      },
      alignmentAnnotationVisibility: {
        features: true,
        parts: true
      },
      linearViewOptions: () => {
        return {
          selectionLayerRightClicked: ({ event }) => {
            window.tgCreateMenu(
              [
                {
                  text: "Selection Layer Right Clicked!"
                }
              ],
              undefined,
              event
            );
          }
        };
      }
    });

    setTimeout(() => {
      console.info("React-> alignment.getState():", alignment.getState());
    }, 10000);
  };
  componentDidMount() {
    this.mountEditor();
  }
  render() {
    return (
      <div style={{width: "100%", height: "calc(100vh - 150px)"}}
           ref={(node)=> {this.node = node}}>
      </div>
    );
  }
}